<template>
  <div class="bottom_main">
    <div class="flex JustifyContentSA textC">
      <p class="booking">
        <span class="font_s15 title1">待售墓穴总数</span>
        <span class="font_s34" style="color: #5AD834;">4.8</span>
        <span class="font_s15" style="color: #5AD834;">万</span>
      </p>
      <p class="sold">
        <span class="font_s15 title1">预计未来三年购墓人数</span>
        <span class="font_s34" style="color: #5AD834;">5.7</span>
        <span class="font_s15" style="color: #5AD834;">万</span>
      </p>
    </div>
    <div class="flex JustifyContentC">
      <p class="colorF font_s22 remind">
        <img class="verticM" style="height: 2rem;" src="../../assets/img/data/24.png" alt="" />
        <!-- &nbsp;&nbsp; {{currentTimeStr | formatDate}}&nbsp;&nbsp; 距离2019年12月22日正冬至还有 <template><DayLast :endTime='endTime'></DayLast></template> 天 -->
        <template><TimeAndDate :endTime='endTime'></TimeAndDate></template>
      </p>
    </div>
  </div>
</template>
<script>
import TimeAndDate from './components/TimeAndDate'
export default {
  name: 'Bottom',
  data () {
    return {
      endTime: '2019-12-22'
    }
  },
  components: {
    TimeAndDate
  }
}
</script>
<style lang="scss" scoped>
.bottom_main {
  width: 50%;
  position: absolute;
  // background: #FF00FF;
  bottom: 0;
  left: 25%;
  .booking {
    width: 15.4375rem;
    height: 3.4375rem;
    background: url(../../assets/img/data/22.png) no-repeat;
    background-size: 100% 100%;
    .title1 {
      font-family: PingFang-SC-Medium;
      font-weight: bold;
      color: rgba(74, 74, 74, 1);
      text-shadow: 0px 0px 10px rgba(5, 8, 53, 0.75);
      background: linear-gradient(0deg, rgba(90, 216, 52, 1) 0%, rgba(255, 255, 255, 1) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
  .sold {
    width: 15.4375rem;
    height: 3.4375rem;
    background: url(../../assets/img/data/23.png) no-repeat;
    background-size: 100% 100%;
    .title1 {
      font-family: PingFang-SC-Medium;
      font-weight: bold;
      color: rgba(74, 74, 74, 1);
      text-shadow: 0px 0px 10px rgba(5, 8, 53, 0.75);
      background: linear-gradient(0deg, rgba(90, 216, 52, 1) 0%, rgba(255, 255, 255, 1) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
  .remind {
    padding: 0 2rem;
    line-height: 4rem;
    margin-top: 1rem;
    margin-bottom: 2rem;
    background: url(../../assets/img/data/25.png) no-repeat;
    background-size: 100% 100%;
  }
}
</style>
